<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拦截器</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
  <button>发送请求</button>
  <button>获取段子</button>

  <script>
    // NProgress.start();
    // setTimeout(() => {
    //   NProgress.done();
    // }, 2000)

    //获取按钮
    let btns = document.querySelectorAll('button');

    //添加请求拦截器
    axios.interceptors.request.use(config => {
      //请求拦截器成功回调, 执行时会收到 配置对象
      console.log('请求拦截器 - 成功回调');
      //显示进度条
      NProgress.start();
      //这里一定要返回 config 配置对象
      return config;
      // throw '出了点问题';
    }, err => {
      //请求拦截器失败回调
      console.log('请求拦截器 - 失败回调');
      //请求拦截器失败回调, 应该要返回的 promise 或者 抛出错误
      // return Promise.reject(err);
      throw err;
    });

    //添加响应拦截器                 axios 发送请求成功返回 promise 对象成功的结果值
    axios.interceptors.response.use(response => {
      //响应拦截器 成功回调
      console.log('响应拦截器 - 成功回调');
      //结束之后, 隐藏进度条
      NProgress.done();
      //要返回一个响应结果
      return response.data;
    }, err => {
      //响应拦截器 失败回调
      // console.log('响应拦截器 - 失败回调');
      console.log('请求失败~~~');
      throw err; //建议写这个, 虽然控制台会报错, 但是不影响代码运行和功能, 好处是: 可以对错误进行『个性化处理』
      // return new Promise(() => {});// 这里可以防止控制台的报错
    });

    btns[0].onclick = function(){
      axios.get('http://api.xiaohigh.com/hero')
      .then(response => {
        console.log(response);
      })
    }
  
    btns[1].onclick = function(){
      axios.get('http://api.xiaohigh.com/duanz')
      .then(v => {
        console.log(v);
      }, r => {
        alert('获取失败~~');
      })
    }
    
  </script>

</body>
</html>